<template>
  <div class="cluster recovery">
    <a-card style="width: 100%">
      <p slot="title" class="cardTitles">
        <span>登录日志</span>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-form-item label="所属站段">
            <a-select
              v-model="section"
              style="width: 120px"
              @change="handleSectionChange"
              :disabled="loginUserAuth===3"
            >
              <a-select-option v-for="section in sectionData" :key="section">
                {{ section }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="车间/科室">
            <a-select v-model="shop" style="width: 150px" :disabled="loginUserAuth===3">
              <a-select-option v-for="shop in shopData" :key="shop">
                {{ shop }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="起始时间">
            <a-range-picker
              format="YYYY-MM-DD"
              @change="onChange"
              @ok="onOk"
              v-model="dateTime"
              style="width: 350px"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="search">搜索</a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div style="margin-top: 20px" class="table-content">
        <a-table
          bordered
          :columns="columns"
          :data-source="list"
          :loading="loading"
          :pagination="pagination"
          @change="logTableChangePage"
        >
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { paging } from "assets/js/mixin";
import { getUserLog} from "@/api/log";
import moment from 'moment';
export default {
  mixins: [paging],
  data() {
    return {
      //是否显示弹框
      loginUserAuth:JSON.parse(localStorage.getItem("userInfo")).auth,
      section:'',
      sectionData:[],
      shop:'',
      shopData:[],
      loading:false,
      treeArr:[],
      dateTime:[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      columns: [
        {
          title: "用户名",
          dataIndex: "name",
        },
        {
          title: "所属站段",
          dataIndex: "section",
        },
        {
          title: "车间/科室",
          dataIndex: "shop",
        },
        {
          title: "登录操作",
          dataIndex: "action",
        },
        {
          title: "登录时间",
          dataIndex: "date",
        },
        {
          title: "登录ip",
          dataIndex: "ip",
        },
      ],
      formLayout: {
        spanCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      list:[]
    };
  },
  mounted() {
    if(this.loginUserAuth === 3){
      this.section = JSON.parse(localStorage.getItem("userInfo")).section
      this.shop = JSON.parse(localStorage.getItem("userInfo")).shop
    }
    this.getSection()
    this.getUserLogData()
  },
  methods: {
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getUserLogData();
    },
    //重置
    reset() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.section = "";
      this.shop = "";
      this.dateTime=[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')];
      this.getUserLogData();
    },
    getUserLogData(){
        this.loading = true;
        var params = {
        page: this.pageNum,
        limit: this.pageSize,
        section: this.section,
        shop: this.shop,
        startTime:this.dateTime[0]?this.dateTime[0]:'',
        endTime:this.dateTime[1]?this.dateTime[1]:'',
      };
      console.log(params)
        getUserLog(params).then((res)=>{
          this.list = res.data.logs;
          this.pagination.total = res.data.total;
          this.loading = false;
        }).catch((err)=>{
          this.$message.destroy();
          this.$message.error(err);
        })
    },
    //获取组织站段信息
    getSection() {
      var treeArr = JSON.parse(localStorage.getItem("organization"));
      var sectionArr = [];
      for (const key in treeArr) {
        sectionArr.push(key);
      }
      this.sectionData = sectionArr;
      this.treeArr = treeArr
    },
    handleSectionChange() {
      this.shop = "";
      var shopArr = [];
      for (const key in this.treeArr[this.section]) {
        shopArr.push(key);
      }
      this.shopData = shopArr;
    },
    onChange(value, dateString) {
      this.dateTime = dateString
    },
    onOk(value) {
      console.log("onOk: ", value);
    },
    //分页操作
    logTableChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getUserLogData();
    },
  },
};
</script>

<style lang="stylus" scoped>
.formDiv {
  .lable {
    margin-right: 10px;
  }
}

.upload {
  float: right;
}

.recovery {
  height: 100%;
}

.table-content {
  height: calc(100% - 138px);
  overflow: auto;
}

.ant-card-body {
  height: 100%;
}
</style>
